<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>欢迎光临 Music Store</title>
<link type="text/css" rel="Stylesheet"
	href="${pageContext.request.contextPath }/style/front.css" />
<script type="text/javascript" src="../script/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../script/jquery-ui-1.9.2.custom.js"></script>
<link type="text/css" rel="stylesheet"
	href="../css/ui-lightness/jquery-ui-1.9.2.custom.css" />
<script>
	$(function() {
		$("#dialog").dialog({
			title : "分类管理",
			autoOpen : false,
			width : 400,
			modal:true,
			beforeClose:"false"
		});
		
		$("#addGenre").click(function() {
			$("#dialog").dialog("open");
		});
		$("#cancel").click(function() {
			$("#dialog").dialog("close");
		});
		/* $("#dialog").delegate("button.check","click",function(){
		 $("#dialog").dialog("open");
		var id = $(this).attr("rel");
		$("#albumId").val(id);
		});
		$(".check").click(function(){
		  var id = $(this).attr("rel");
		 $("#albumId").val(id);
		});  */
		$("#main").delegate("button", "click", function() {
			var albumId = $(this).attr("rel");
			$.ajax({
				type: "GET",
				url: "genre",
				data: "id="+albumId,
				dataType: "json",//返回的数据格式
				success: function(json){
					 $("#albumId").val(json.id);
					 $("#genreName").val(json.name);
					 $("#description").val(json.description);
				}
				});
		});
		$(".delete").click(function(){
			var target = $(this).parents("tr").find("td:eq(0)").text();
			var result = confirm("确定删除分类"+$("#genreName").val()+"吗？");
			if(result)
				/* location.href="delete?id="+$(this).attr("rel"); */
				/*使用异步请求，不要使用同步的  */
				$.ajax({
					url:"delete",
					data:"id="+$(this).attr("rel"),
					type:"post",
					dataType:"json",
					success:function(){
						alert("删除成功");
					}
				});
		});
		$(".check").click(function(){
 			$("#dialog").dialog("open");
		});
	});
</script>
<style>
#title {
	width: 950px;
	margin: 10px auto;
	height: 40px;
	background-color: white;
}

#title h3 {
	line-height: 40px;
	margin: 0px 30px;
	font-size: 18px;
}

#main {
	width: 930px;
	margin: 0px auto;
}

.table thead {
	font-weight: bold;
}

.table table {
	text-align: center;
	margin: 10px auto;
}

.table td {
	width: 300px;
	background-color: #f4f4f4;
	padding: 2px 0px;
}

.table .sp {
	width: 300px;
}

hr {
	margin: 5px 0px;
}

.search {
	margin: 5px 10px;
}

#dialog td {
	padding: 5px 10px;
	width: 100px;
}

#dialog input[type=text] {
	width: 150px
}
</style>
</head>

<body>
	<div id="wrapper">
		<s:action name="header" executeResult="true" namespace="/admin"></s:action>
		<div id="content">
			<div id="title">
				<h3>分类管理</h3>
			</div>
			<div id="main">
				<div class="search">
					<form action="genreBiz" method="post">
						分类名称：<input type="text" name="name" value="${name}" />&nbsp;&nbsp;&nbsp;
						<input type="submit" value="查询" id="search" />
					</form>
				</div>
				<hr />
				<input type="button" id="addGenre" value="添加分类">
				<div id="dialog">
					<form method="post" action="editGenre">
						<input type="hidden" id="albumId" name="genre.id" />
						<table>
							<tr>
								<td>分类名:</td>
								<td><input type="text" id="genreName"
									name="genre.name"/></td>
							</tr>
							<tr>
								<td>描述:</td>
								<td><textarea cols="35" id="description" rows="4" name="genre.description">${genre.description}</textarea></td>
							</tr>
							<tr>
								<td></td>
								<td><input type="submit" id="submit" value="保存" />&nbsp;&nbsp; <input
									type="button" id="cancel" value="取消" /></td>
							</tr>
						</table>
					</form>
				</div>
				<div class="table">
					<table>
						<thead>
							<tr>
								<td>分类名称</td>
								<td>详细</td>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${genreList}" var="g">
								<%-- <input type="hidden" value="${g.id }" id="genreId"/> --%>
								<tr>
									<td>${g.name}</td>
									<td><button rel='${g.id }' class="check">查看</button>&nbsp;&nbsp;
										<button rel='${g.id }' class="delete">删除</button></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
			<div class="clearBoth"></div>
		</div>
		<%@ include file="../shared/back.jsp"%>
	</div>
</body>
</html>
